<template>
  <div>
    <el-form ref="from" :model="form" label-width="80px" label-position="right" size="mini">
      <el-row>
        <el-col :span="10">
          <el-form-item label="名称:" prop="Name">
            <el-input v-model="form.Name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="代号:" prop="Code">
            <el-input v-model="codeComputed"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="序号:" prop="Order">
            <el-input v-model="form.Order"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="描述:" prop="Description">
            <el-input v-model="form.Description"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="备注:" prop="Remark">
            <el-input type="textarea" maxlength="30" show-word-limit v-model="form.Remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      form: {
        Name: '',
        Code: '',
        Order: '',
        Description: '',
        Remark: '',
        ParentId: 0
      }
    };
  },
  methods: {
    submitclick: function (parentId) {
      const _this = this;
      _this.form.ParentId = parentId;
      const formData = {};
      for (var key in _this.form) {
        _this.$set(formData, key, _this.form[key]);
      }
      _this.$api.CategoryApi.SaveCateGoryForm(formData).then(res => {
        _this.$emit('callback');
        this.$refs.from.resetFields();
      })
    }
  },

  computed: {
    codeComputed: {
      get: function () {
        return this.form.Code;
      },
      set: function (val) {
        this.form.Code = val.toUpperCase();
      }
    }

  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
</style>
